<script setup>
import { computed, onMounted, nextTick, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

// 接收属性
const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false
  }
})

// 定义事件
const emit = defineEmits(['menu-click'])

const router = useRouter()
const route = useRoute()

// 移除TDesign自动添加的内联样式
const removeInlineStyles = () => {
  nextTick(() => {
    const siderElement = document.querySelector('.t-layout__sider')
    if (siderElement) {
      siderElement.removeAttribute('style')
    }
  })
}

// 监听collapsed变化，移除内联样式
watch(() => props.collapsed, () => {
  removeInlineStyles()
})

onMounted(() => {
  removeInlineStyles()
})

// 菜单项
const menu = [
  {
    title: '首页',
    path: '/',
    icon: 'home',
  },
  {
    title: '用户管理',
    path: '/users',
    icon: 'user-circle',
  },
  {
    title: '统计报表',
    path: '/statistics',
    icon: 'chart-bar',
  },
  {
    title: '景点管理',
    path: '/attractions',
    icon: 'location',
  },
  {
    title: '活动管理',
    path: '/activities',
    icon: 'calendar',
  },
  {
    title: '订单管理',
    path: '/orders',
    icon: 'shop',
  },
  {
    title: '系统设置',
    path: '/settings',
    icon: 'setting',
  },

  {
    title: '微信云测试',
    path: '/test/wechat-cloud',
    icon: 'cloud',
  },
]

// 当前激活的菜单项
const activeMenu = computed(() => route.path)

// 处理菜单项点击
const handleMenuItemClick = (item) => {
  emit('menu-click', item)
}
</script>

<template>
  <t-aside class="layout-sider" :class="{ collapsed: props.collapsed }">
    <!-- Logo -->
    <div class="logo-container">
      <div class="logo-icon">
        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="4" y="4" width="24" height="24" rx="4" fill="#1890ff"/>
          <path d="M16 8L20 12L16 16L12 12L16 8Z" fill="white"/>
          <path d="M16 16L20 20L16 24L12 20L16 16Z" fill="white" opacity="0.8"/>
        </svg>
      </div>
      <h1 v-if="!props.collapsed" class="logo-text">贵州四季康养</h1>
    </div>
    
    <!-- 菜单 -->
    <t-menu
      :value="activeMenu"
      :collapsed="props.collapsed"
    >
      <t-menu-item
        v-for="item in menu"
        :key="item.path"
        :value="item.path"
        @click="() => handleMenuItemClick(item)"
      >
        <template #icon>
          <t-icon :name="item.icon" />
        </template>
        {{ item.title }}
      </t-menu-item>
    </t-menu>
  </t-aside>
</template>

<style scoped>
.layout-sider {
  background-color: #001529;
  border-right: none;
  transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 100;
}

/* 折叠状态 */
.layout-sider.collapsed {
  width: 64px;
}



/* 侧边栏菜单样式 */
.layout-sider :deep(.t-menu) {
  background-color: transparent;
  border: none;
  flex: 1;
  padding: 8px 0;
}

.layout-sider :deep(.t-menu-item) {
  color: rgba(255, 255, 255, 0.65);
  height: 48px;
  line-height: 1;
  padding: 0 24px;
  margin: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: visible;
  font-size: 14px;
  position: relative;
}

.layout-sider :deep(.t-menu-item:hover) {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

.layout-sider :deep(.t-menu-item.t-is-active) {
  color: #fff;
  background-color: #1890ff;
}

.layout-sider :deep(.t-menu-item .t-icon) {
  font-size: 16px;
  margin-right: 16px;
  min-width: 16px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-sider :deep(.t-menu-item .t-menu-item__content) {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: visible;
  height: 100%;
}

.layout-sider :deep(.t-menu-item .t-menu-item__title) {
  overflow: visible;
  white-space: nowrap;
  text-overflow: unset;
}

.logo-container {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.logo-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 16px;
}

.logo-icon svg {
  width: 100%;
  height: 100%;
}

.logo-text {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}
</style> 